<template>
	<view class="goods-price" :style="labelStyle">
		<text class="unit">￥</text>
		<text class="num">{{ price[0] }}</text>
		<text class="decimal">.{{ price[1] }}</text>
	</view>
</template>

<script setup>
	import {
		defineProps,
		computed
	} from 'vue';

	defineOptions({
		name: 'goods-price'
	});

	const props = defineProps({
		value: {
			type: [Number, String],
			default: 0
		},
		size: {
			type: [Number, String],
			default: 48
		},
		color: {
			type: String,
			default: '#000'
		}
	})

	const price = computed(() => {
		let numArr = (Number(props.value).toFixed(2) + '').split('.');
		return numArr;
	})

	const labelStyle = computed(() => {
		return `font-size:${props.size}rpx;color:${props.color};`
	})
</script>

<style lang="scss" scoped>
	.goods-price {

		view,
		text {
			font-size: inherit;
		}

		display: inline-block;

		text {
			vertical-align: baseline;
		}

		.num {
			font-weight: bold;
			color: #fa3534;
		}

		.unit,
		.decimal {
			font-size: 60%;
			font-weight: 500;
			color: #fa3534;
		}

		.unit {
			margin-right: -0.25em;
		}
	}
</style>